/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/10
 *@description  back-top  component 返回顶部插件
 */

/**
 * #item
 *
 * @type        aty-back-top
 * @cn          返回顶部
 * @menu        工具
 * @stPlugin    true
 */
import config from '../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-back-top'
// module
const module = {
  name: prefixCls,
  props: {
    /**
     * #property
     *
     * @name    height
     * @cn      滚动高度
     * @type    number
     * @bind    must
     * @value  400
     * @description 页面滚动高度达到该值时才显示BackTop组件
     */
    height: {
      type: Number,
      default: 400
    },

    /**
     * #property
     *
     * @name    bottom
     * @cn      底部距离
     * @type    number
     * @bind    must
     * @value  30
     * @description 组件距离底部的距离
     */
    bottom: {
      type: Number,
      default: 30
    },
    /**
     * #property
     *
     * @name    right
     * @cn      右侧距离
     * @type    number
     * @bind    must
     * @value  30
     * @description 组件距离右侧的距离
     */
    right: {
      type: Number,
      default: 30
    },
    /**
     * #property
     *
     * @name    duration
     * @cn      滚动持续时间（毫秒）
     * @type    number
     * @bind    must
     * @value  1000
     * @description 滚动动画持续时间，单位：毫秒
     */
    duration: {
      type: Number,
      default: 1000
    },
    /**
     * #property
     *
     * @name    target
     * @cn      目标元素
     * @type    null
     * @description  目标元素,为目标容器的id或者唯一的class类名，这个元素必须唯一，默认是window对象(格式类似#id  .class)
     */
    target: {
      type: null
    }
  },
  data () {
    return {
      backTop: false
    }
  },
  computed: {
    classes () {
      return [
                    `${prefixCls}`,
                    {
                      [`${prefixCls}-show`]: this.backTop
                    }
      ]
    },
    styles () {
      return {
        bottom: `${this.bottom}px`,
        right: `${this.right}px`
      }
    },
    innerClasses () {
      return `${prefixCls}-inner`
    },
    iconClass () {
      return [
                    `${config.prefix}-icon`,
                    `${config.prefix}-icon-chevron-up`
      ]
    }
  },
  methods: {
    handleScroll () {
      this.backTop = (this.target ? this.currentTarget.scrollTop : window.pageYOffset) >= this.height
    },
    back () {
      const sTop = this.target ? this.currentTarget.scrollTop
        : (document.documentElement.scrollTop || document.body.scrollTop)
      Artery.scrollTop(this.currentTarget, sTop, 0, this.duration)
      /**
       * #event
       *
       * @name    click
       * @body
       * @description   点击返回顶部触发的事件
       */
      this.$emit('click')
    }
  },
  mounted () {
    this.currentTarget = this.target ? document.querySelector(this.target) : window
    Artery.on(this.currentTarget, 'scroll', this.handleScroll)
    Artery.on(this.currentTarget, 'resize', this.handleScroll)
  },
  beforeDestroy () {
    Artery.off(this.currentTarget, 'scroll', this.handleScroll)
    Artery.off(this.currentTarget, 'resize', this.handleScroll)
  }
}
export default module
